<template>
  <div class="basic-from" v-dialogDrag>
    <el-dialog
      custom-class="small-padding-dialog"
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogVisible"
      :width="width"
      @close="handleClosed"
      @open="openSuccess"
    >
      <ul class="tabs-ul">
        <li
          v-for="item in tabs"
          :key="item.value"
          :class="{ active: activeIndex === item.value }"
          @click="changeIndex(item.value)"
        >
          {{ item.name }}
        </li>
      </ul>
      <div class="subject-content">
        <roomInformation v-show="activeIndex === 0" :formData="tabs[0].formData" :houseData="houseData"></roomInformation>
        <roomRecord v-show="activeIndex === 1"  :houseData="houseData"></roomRecord>
        <disinfect v-show="activeIndex === 2"  :houseData="houseData"></disinfect>
        <!-- <component
          :is="tabs[activeIndex].components"
          :formData="tabs[activeIndex].formData"
          :houseId="houseId"
        ></component> -->
      </div>
      <div slot="footer"  v-if="footer">
        <template>
          <slot name="footer"></slot>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/**
 * @param {Number,String} houseData   // 房屋id
 *  @param {string} title   // 弹窗名称
 * @param {string} width   // 弹窗宽度 可px或%
 * @param {boolean} footer   // 是否显示footer操作按钮
 * @param {Array} tabs   // 选项卡切换数据
 * @param {Number} defaultIndex   // 默认展示切卡
 */
import roomRecord from './components/roomRecord';
import roomInformation from './components/roomInformation';
import disinfect from './components/disinfect';
export default {
  name: 'hotelDialog',
  components: {
    disinfect,
    roomRecord,
    roomInformation,
  },
  props: {
    tabs: {
      type: Array,
      default: () => {
        return [
          { name: '隔离点房间信息', value: 0, components: 'roomInformation',formData:{} },
          { name: '房间使用记录', value: 1, components: 'roomRecord' },
          { name: '消杀情况登记', value: 2, components: 'disinfect' },
        ];
      },
    },
    houseData: {
      type: Object,
      default: ()=>{
        return {}
      },
    },
    title: {
      type: String,
      default: '查看',
    },
    width: {
      type: String,
      default: '50%',
    },
    footer: {
      type: Boolean,
      default: true,
    },
    defaultIndex:{
      type: Number,
      default: 0,
    }
  },
  data() {
    return {
      //弹窗开关
      dialogVisible: false,
      activeIndex: 0,
    };
  },
  methods: {
    openSuccess(){
      this.activeIndex = this.defaultIndex
    },
    changeIndex(index) {
      this.activeIndex = index;
    },
    // 更改弹窗状态
    async changeVisible() {
      this.dialogVisible = !this.dialogVisible;
    },
    // 提交新增
    async save() {
      this.$emit('submit');
    },
    // 弹窗关闭还原
    handleClosed() {
      this.dialogVisible = false;
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs-ul {
  display: flex;
  li {
    margin: 0 20px;
    height: 40px;
    line-height: 40px;
  }
  .active {
    color: #409eff;
    border-bottom: 1px solid #409eff;
    transition: all 0.4s ease-out;
  }
}
.subject-content {
  padding: 0 20px;
}
</style>
